'use client';

import React from 'react';
import { Space, Flex } from 'antd';

interface StatisticCardProps {
	icon: string;
	title: string;
	value: number;
	unit: string;
}

const StatisticCard: React.FC<StatisticCardProps> = (props) => {
	const { icon, title, value, unit } = props;

	return (
		<div style={{ width: 172, height: 94, background: 'linear-gradient(134deg, #192241 0%, rgba(33,38,61,0) 100%)' }}>
			<Flex align="center" style={{ padding: '0 10px', height: 36, background: 'linear-gradient(90deg, rgba(143, 176, 215, 0.2) 0%, rgba(19,26,45,0.2) 100%)', backdropFilter: 'blur(10px)' }}>
				<img src={icon} alt="icon" style={{ width: 20, height: 20, marginRight: 8 }} />
				<span style={{ color: 'rgba(193,234,255,0.6)', fontSize: 13, fontWeight: 500 }}>{title}</span>
			</Flex>
			<Flex align="baseline" justify="start" style={{ paddingTop: 8, paddingBottom: 16, paddingLeft: 8, wordBreak: 'break-all' }}>
				<span style={{ color: '#C1EAFF', fontSize: 28, fontWeight: 'bold', marginRight: 5 }}>{value.toLocaleString('en')}</span>
				<span style={{ color: '#C1EAFF', fontSize: 14, fontWeight: 600 }}>{unit}</span>
			</Flex>
		</div>
	);
}

export default StatisticCard;

